<template>
    <div>
        hello !!
        <h1 v-html="this.$store.getters.getName"></h1>
        <hr />
        <h1>{{value2}}</h1>
        <test-list v-bind:aaa="list" @bbb="ccc"></test-list>
        <hr />
        <test-slot>
            <h1>hello slot匿名卡槽</h1>
            <div slot="slot1" slot-scope="scope1">
                <span class="red">具名卡槽{{scope1.data}}</span>
            </div>
        </test-slot>
        <router-link to="/Test1/a">to二级</router-link>
        <router-view />
    </div>
</template>
<script>
import TestList from '@/components/TestList'
import TestSlot from '@/components/TestSlot'

export default {
    name: 'test',
    data(){
        return {
            value2: '',
            list: ['aaa', 'bbb', 'ccc']
        }
    },
    components: {TestList, TestSlot},
    methods: {
        ccc(data) { 
            console.info(arguments)
            this.value2 = data
        }
    }

}
</script>
<style scoped>
    .red {
        color: red;
    }
</style>